<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        #myCanvas {
            border: 1px solid #9C9898;
        }
    </style>
</head>
<body>
　　
<canvas id="myCanvas" width="800px" height="500px"></canvas>
　　
　　
<div id="colorBox">
    　　
    <button id="black">黑</button>
    　　
    <button id="red">红</button>
    　　
    <button id="yellow">黄</button>
    　　
    <button id="blue">蓝</button>
    　　
</div>
　　
<div id="toolBox">
    　　
    <button id="pencil">铅笔</button>
    　　
    <button id="line">直线</button>
    　　
    <button id="rect">矩形</button>
    　　
    <button id="circle">圆形</button>
    　　
    <button id="multiLine">多边形</button>
    　　
</div>
　　
<div id="debug">
    　　
</div>
　　
　　
<script>
    var canvas, context,
        isPainting,
        clickX, clickY, clickDrag, clickColor,
        curColor, curTool, //当前的颜色和所使用的工具
        shapes, //存储几何形状
        tempX1,tempX2,tempY1,tempY2;//临时工

    var mouseDown = function(e){
        var mouseX = e.pageX;
        var mouseY = e.pageY;
        isPainting = true;
        if(curTool == "pencil"){
            addClick(mouseX, mouseY, false);
            redraw();
        }else if(curTool == "rect"){
            tempX1 = mouseX;
            tempY1 = mouseY;
        }


    }
    var mouseUp = function(e){
        isPainting = false;
        if(curTool == "rect"){
            var mouseX = e.pageX;
            var mouseY = e.pageY;
            tempX2 = mouseX;
            tempY2 = mouseY;
            var aRect = new Rect();
            aRect.beginX = tempX1;
            aRect.beginY = tempY1;
            aRect.endX = tempX2;
            aRect.endY = tempY2;
            aRect.color = curColor;
            shapes.push(aRect);
        }
        redraw();
    }
    var mouseMove = function(e){
        if(isPainting){
            var mouseX = e.pageX;
            var mouseY = e.pageY;
            if(curTool == "pencil"){
                addClick(mouseX, mouseY, true);
                redraw();
            }else if(curTool == "rect"){
                redraw();
                context.beginPath();
                context.strokeStyle = curColor;
                context.rect(tempX1,tempY1, mouseX-tempX1, mouseY-tempY1);
                context.stroke();
            }

        }

    }
    var mouseOut = function(e){
        isPainting = false;
    }

    function addClick(mouseX, mouseY, isDragging){
        clickX.push(mouseX);
        clickY.push(mouseY);
        clickDrag.push(isDragging);
        clickColor.push(curColor);
    }
    //声明矩形类
    function Rect(){
        this.beginX = 0;
        this.beginY = 0;
        this.endX = 0;
        this.endY = 0;
        this.color = "#000000";
        //绘制方法
        this.draw = function(){
            context.beginPath();
            context.strokeStyle = this.color;
            context.rect(this.beginX, this.beginY, this.endX-this.beginX, this.endY-this.beginY);
            context.stroke();
        };
    }

    //重绘
    function redraw(){
        context.clearRect (0 , 0, canvas.width , canvas.height );
        var numOfPts = clickX.length;
        var numOfShapes = shapes.length;
        for(var i=0; i<numOfPts; i++){
            context.beginPath();
            context.strokeStyle = clickColor[i];
            if(clickDrag[i]){
                context.moveTo(clickX[i-1], clickY[i-1]);
                context.lineTo(clickX[i], clickY[i]);
            }else{
                context.arc(clickX[i], clickY[i], 0.5, 0, 2*Math.PI, true);
            }
            context.closePath();
            context.stroke();
        }
        for(var j=0; j<numOfShapes; j++){
            shapes[j].draw();
        }
    }

    //初始化
    function init(){
        canvas = document.getElementById("myCanvas");
        context = canvas.getContext("2d");
        isPainting = false;
        clickX = new Array();
        clickY = new Array();
        clickDrag = new Array();
        clickColor = new Array();
        shapes = new Array();
        curColor = "#000000";
        curTool = "pencil";
        //鼠标事件
        canvas.onmousedown = mouseDown;
        canvas.onmouseup = mouseUp;
        canvas.onmousemove = mouseMove;
        canvas.onmouseout = mouseOut;
        var black = document.getElementById("black");
        black.onclick = function(){
            curColor = "#000000";
        }
        var red = document.getElementById("red");
        red.onclick = function(){
            curColor = "#ff0000";
        }
        var yellow = document.getElementById("yellow");
        yellow.onclick = function(){
            curColor = "#ffff37";
        }
        var blue = document.getElementById("blue");
        blue.onclick = function(){
            curColor = "#2894ff";
        }
        var pencil = document.getElementById("pencil");
        pencil.onclick = function(){
            curTool = "pencil";
        }
        var rect = document.getElementById("rect");
        rect.onclick = function(){
            curTool = "rect";
        }
    }

    window.onload = init();

</script>

</body>

</html>